
<template>
  <div class="layout">
    <el-container>
      <el-header class="adminHeader">
        <nav>
          <img src="../../assets/logo.png" />
          <a>首页</a>
          <a>订单维护</a>
          <a>会员管理</a>
          <a>场馆维护</a>
          <a>系统管理</a>
          <a>配置</a>
        </nav>
        <div class="userInfo">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{user.name}}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>积分:{{ user.score }}</el-dropdown-item>
                <el-dropdown-item @click="logout">退出</el-dropdown-item>         
              </el-dropdown-menu>
            </template>
        </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside" :style="{'width':isCollapse?'64px':'200px'}">
          <span @click="isCollapse = !isCollapse" class="toggle">
            <el-icon v-if="isCollapse"><Expand /></el-icon>
            <el-icon v-else> <Fold /></el-icon>
          </span>
          <el-menu 
          router
          background-color="#666"
          text-color="#fff"
          default-active="2"  :collapse="isCollapse">
          <!-- <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>平台设置</span>
            </template>
            <el-menu-item index="1-4-1">角色管理</el-menu-item>
            <el-menu-item index="/admin/system/staff">平台用户管理</el-menu-item>          
          </el-sub-menu>
            <el-menu-item index="1">
              <el-icon> <setting /> </el-icon>
              <template #title>Navigator Four</template>
            </el-menu-item> -->
            <!--01 把store中的menu进行遍历  -->
            <!-- <template v-for="item in store.menu" :key="item.path">
            
              <el-sub-menu :index="item.path" v-if="item.children">
                  <template #title>
                    <el-icon><component :is="item.icon"/></el-icon>
                    <span>{{item.name}}</span>
                  </template>
                
                <el-menu-item :index="child.path" v-for="child in item.children" :key="child.path">
                 {{child.name}} 
              </el-menu-item>
              </el-sub-menu>
               
              <el-menu-item :index="item.path" v-else>
                <el-icon> <component :is="item.icon"/> </el-icon>
                <template #title>{{item.name}}</template>
              </el-menu-item>
            </template> -->
            <MenuList :list="store.menu"></MenuList>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { useMenu } from '@/stores/useMenu';

const store = useMenu();
// 是否折叠
const isCollapse = ref(true)
// 用户信息
const user = ref(JSON.parse(sessionStorage.getItem('user')||"{}")) 
// 退出登录
const logout = () => {
  // 清空session
  sessionStorage.removeItem('user')
  sessionStorage.removeItem('token')
  // 跳转到登录页
  location.href = '/'
}
</script>
<style>
.userInfo .el-dropdown-link{color:#fff}
</style>
<style scoped lang="scss" > 
.aside{
  background-color: #666;
  color: #fff;
  .toggle{
    width:64px;
    display:inline-block;
    text-align:center;
    line-height: 64px;
    height: 64px;
  }
}
.adminHeader{
  display: flex; 
  justify-content: space-between;
  background-color: #333;
  align-items: center;  
  padding-right: 20px;
  .userInfo{color:#fff}
  nav{
    vertical-align: bottom;
    display: flex;
    align-items: flex-end;
    height: 100%;
  }
  nav a{
    display: block; 
    line-height: 40px;
    height: 40px;
    color: #fff;
    border-radius: 6px 6px 0 0;
    padding: 0  20px;
    &:hover{
      background-color: #f70;
    }
  }

}
.layout{
  width: 100%;
  height: 100vh;
 
}
.layout>.el-container{
    height: 100%;
  }
</style>
